.userpage{
    width: 100%;
    height: 500px;
    background-color: rgba(255, 255, 255, 0.8);
}
.userpage-l{
    float: left;
    width: 20%;
    height: 100%;
    border-right: 3px solid whitesmoke;
    text-align: center;
}
.userpage-l ul{
    margin-top: 20px;
}
.userpage-l ul li{
    width: 100%;
    height: 30px;
    line-height: 30px;
    list-style: none;
    margin-bottom:15px;
    color: rgb(103, 104, 105);
}
.userpage-l ul li:hover{
   
    color: skyblue;
}
.userpage-r{
    float: left;
    width: 78%;
    height: 100%;
}
.userpage-r1{
    width: 100%;
    height: 150px;
    border-bottom: 1px solid whitesmoke;
}
.userpage-r1 div{
    float: left;
    width: 33%;
    height: 100%;
    margin-right: 1px;
 }
 .ur11{
     
     border-right: 1px solid whitesmoke;
     border-bottom: 1px solid whitesmoke;
}
 .ur11 input{
     float: left;
     width: 100px;
     height: 70%;
     text-align:center;
     line-height:120px;
     margin:22px 1px 0;
     border-radius: 110px;
     opacity:0.2;
 }
 .ur11 div{
     float: left;
    width: 200px;
    margin:28px 0 0;
    height: 60%;
    font-size: 18px;
    padding-top:30px;
 }
 .ur11 div span{
     margin:5px 20px;
 }
 .ur12{
     padding-top: 50px;
     border-right: 1px solid whitesmoke;
     border-bottom: 1px solid whitesmoke;
 }
 .ur12 div{
     width: 100%;
     height: 30px;
     font-size: 20px;
     line-height: 30px;
     text-align: center;
 }
 .userpage-r2{
     width: 100%;
     height: 28px;
     margin-top: 20px;
     font-size: 20px;
     padding-left: 30px;
     border-bottom: 1px solid whitesmoke;
 }
 .userpage-r3{
     width: 100%;
     height: 300px;
 }
 .ur31{
    height: 30px;
    border-top: 2px solid grewhitesmokey;
    border-bottom: 2px solid whitesmoke;
 }
 .ur31 li{
     float: left;
     list-style: none;
     height: 30px;
     width: 33%;
     text-align: center;
 }
 .ur32 li{
    float: left;
    list-style: none;
    height: 140px;
    line-height: 140px;
    width: 33%;
    margin-top: 5px;
    text-align: center;
}